<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创作中心 - AI网文小说创作助手</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="mobile-common.css" rel="stylesheet">
</head>
<body>
    <div class="mobile-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span class="status-bar-time">9:41</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-2"></i>
                <i class="fas fa-battery-full ml-2 status-bar-battery"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-left"></div>
            <div class="nav-title">创作中心</div>
            <div class="nav-right"></div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content">
            <!-- 创作引导 -->
            <div class="card mb-4">
                <div class="card-body p-4">
                    <h2 class="text-lg font-bold mb-3">开始创作</h2>
                    <p class="text-sm text-secondary mb-4">AI网文小说创作助手将引导您完成从构思到成稿的全过程</p>
                    
                    <div class="flex justify-between mb-4">
                        <button class="btn btn-primary" onclick="startNewNovel()">
                            <i class="fas fa-plus mr-2"></i> 创建新小说
                        </button>
                        <button class="btn btn-outline" onclick="continueNovel()">
                            <i class="fas fa-edit mr-2"></i> 继续创作
                        </button>
                    </div>
                    
                    <div class="bg-light p-3 rounded-lg">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-lightbulb text-warning mr-2"></i>
                            <span class="font-semibold">创作小贴士</span>
                        </div>
                        <p class="text-xs text-secondary">网文创作的核心在于"爽点"设计，合理安排情节起伏，让读者在阅读过程中获得持续的满足感。</p>
                    </div>
                </div>
            </div>
            
            <!-- 创作流程 -->
            <div class="mb-4">
                <h2 class="text-lg font-bold mb-3">创作流程</h2>
                <div class="card">
                    <div class="p-4">
                        <div class="flex items-center mb-4">
                            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white mr-3">
                                <span>1</span>
                            </div>
                            <div>
                                <h3 class="font-bold">选择流派</h3>
                                <p class="text-xs text-secondary">选择小说的频道和流派</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center mb-4">
                            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white mr-3">
                                <span>2</span>
                            </div>
                            <div>
                                <h3 class="font-bold">输入梗概</h3>
                                <p class="text-xs text-secondary">简要描述小说的核心故事</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center mb-4">
                            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white mr-3">
                                <span>3</span>
                            </div>
                            <div>
                                <h3 class="font-bold">故事要素</h3>
                                <p class="text-xs text-secondary">细化角色、情节、设定等要素</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center mb-4">
                            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white mr-3">
                                <span>4</span>
                            </div>
                            <div>
                                <h3 class="font-bold">章节大纲</h3>
                                <p class="text-xs text-secondary">规划小说的章节结构</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center mb-4">
                            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white mr-3">
                                <span>5</span>
                            </div>
                            <div>
                                <h3 class="font-bold">章节细纲</h3>
                                <p class="text-xs text-secondary">为每个章节设计详细内容</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white mr-3">
                                <span>6</span>
                            </div>
                            <div>
                                <h3 class="font-bold">生成正文</h3>
                                <p class="text-xs text-secondary">AI根据细纲生成章节正文</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 创作工具 -->
            <div class="mb-4">
                <h2 class="text-lg font-bold mb-3">创作工具</h2>
                <div class="grid grid-cols-2 gap-3">
                    <a href="inspiration.html" class="card p-4 flex flex-col items-center justify-center text-center">
                        <div class="w-12 h-12 rounded-full bg-info flex items-center justify-center text-white mb-2">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <span class="font-semibold">灵感生成器</span>
                        <p class="text-xs text-secondary mt-1">获取创作灵感</p>
                    </a>
                    <a href="#" class="card p-4 flex flex-col items-center justify-center text-center" onclick="showToast('角色生成器即将上线', 'info')">
                        <div class="w-12 h-12 rounded-full bg-success flex items-center justify-center text-white mb-2">
                            <i class="fas fa-user"></i>
                        </div>
                        <span class="font-semibold">角色生成器</span>
                        <p class="text-xs text-secondary mt-1">创建丰富角色</p>
                    </a>
                    <a href="#" class="card p-4 flex flex-col items-center justify-center text-center" onclick="showToast('情节优化器即将上线', 'info')">
                        <div class="w-12 h-12 rounded-full bg-warning flex items-center justify-center text-white mb-2">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <span class="font-semibold">情节优化器</span>
                        <p class="text-xs text-secondary mt-1">优化故事情节</p>
                    </a>
                    <a href="#" class="card p-4 flex flex-col items-center justify-center text-center" onclick="showToast('文风调整器即将上线', 'info')">
                        <div class="w-12 h-12 rounded-full bg-danger flex items-center justify-center text-white mb-2">
                            <i class="fas fa-feather"></i>
                        </div>
                        <span class="font-semibold">文风调整器</span>
                        <p class="text-xs text-secondary mt-1">调整写作风格</p>
                    </a>
                </div>
            </div>
            
            <!-- 创作教程 -->
            <div class="mb-4">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-bold">创作教程</h2>
                    <a href="#" class="text-primary text-sm">查看全部</a>
                </div>
                <div class="card">
                    <ul class="list">
                        <li class="list-item">
                            <div class="list-item-content">
                                <h3 class="list-item-title">网文创作入门指南</h3>
                                <p class="list-item-subtitle">了解网文创作的基本要素和流程</p>
                            </div>
                            <div class="list-item-right">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-content">
                                <h3 class="list-item-title">如何设计吸引人的角色</h3>
                                <p class="list-item-subtitle">打造让读者难忘的小说角色</p>
                            </div>
                            <div class="list-item-right">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-content">
                                <h3 class="list-item-title">网文爽点设计技巧</h3>
                                <p class="list-item-subtitle">学习如何设计让读者欲罢不能的爽点</p>
                            </div>
                            <div class="list-item-right">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <a href="home.html" class="tab-item" data-tab="home">
                <i class="fas fa-home tab-icon"></i>
                <span>首页</span>
            </a>
            <a href="novel-list.html" class="tab-item" data-tab="novels">
                <i class="fas fa-book tab-icon"></i>
                <span>我的小说</span>
            </a>
            <a href="create.html" class="tab-item active" data-tab="create">
                <i class="fas fa-plus-circle tab-icon"></i>
                <span>创作</span>
            </a>
            <a href="inspiration.html" class="tab-item" data-tab="inspiration">
                <i class="fas fa-lightbulb tab-icon"></i>
                <span>灵感</span>
            </a>
            <a href="profile.html" class="tab-item" data-tab="profile">
                <i class="fas fa-user tab-icon"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
    
    <script src="mobile-common.js"></script>
    <script>
        // 开始新小说
        function startNewNovel() {
            window.location.href = 'genre-selection.html';
        }
        
        // 继续创作
        function continueNovel() {
            window.location.href = 'novel-list.html';
        }
    </script>
</body>
</html> 